<template>
  <el-container class="el-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="title">
        <img src="../assets/商城.png" alt="" />
        <span>就爱商城后台管理系统</span>
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar :src="imageUrl"></el-avatar>
          {{ this.nickName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus" @click.native="PersonalInfo()"
            >个人信息</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-switch-button" command="logout"
            >退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 首页 -->
          <el-menu-item index="welcome">
            <!-- 图标 -->
            <i class="el-icon-house"></i>
            <!-- 文本 -->
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 客户管理一级菜单 -->
          <el-menu-item index="users">
            <!-- 图标 -->
            <svg
              t="1628668370955"
              class="icon"
              viewBox="0 0 1035 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="17560"
              width="20"
              height="20"
            >
              <path
                d="M219.05 881.9c-13.5 0-24.3-10.8-24.3-24.3v-65.7c0-131.85 79.65-248.4 203.4-297.45l13.95-5.4-11.7-9.45C354.05 443.15 327.5 389.15 327.5 331.1c0-103.95 85.5-189 190.35-189s190.35 84.6 190.35 189c0 58.05-26.55 112.05-72.9 148.5l-11.7 9.45 13.95 5.4c123.75 49.05 203.4 166.05 203.4 297.45v65.7c0 13.5-10.8 24.3-24.3 24.3H219.05z m298.35-362.25c-150.75 0-273.6 121.95-273.6 271.8v41.4H791v-41.4c0-149.4-122.85-271.8-273.6-271.8z m0-328.95c-77.85 0-141.3 63-141.3 140.4S439.55 471.5 517.4 471.5c77.85 0 141.3-63 141.3-140.4s-63.45-140.4-141.3-140.4zM86.3 783.35c-13.5 0-24.3-10.8-24.3-24.3v-50.85c0-95.85 52.65-182.25 137.7-225.9l9.9-4.95-7.65-8.55C175.4 440 161 402.65 161 364.4c0-82.35 66.6-151.65 149.4-155.7-13.05 17.55-22.95 36-29.7 55.8C239.3 278.45 210.5 318.95 210.5 363.95c0 41.85 24.75 80.55 63.45 97.65 10.8 4.05 17.1 12.6 17.1 22.5s-7.2 19.35-18 22.95l-5.85 1.35c-92.25 22.95-156.6 105.3-156.6 199.8v26.55h31.05c-2.7 16.2-4.5 32.4-4.95 48.6H86.3z m810.45 0c-0.45-16.2-1.8-32.4-4.95-48.6h31.05v-26.55c0-94.5-64.35-176.4-156.6-199.8l-6.75-1.35c-9.9-3.6-17.1-12.6-17.1-22.5s6.75-18.45 16.65-22.5c38.7-17.55 63.9-55.8 63.9-98.1 0-45-28.8-85.5-71.55-100.8-6.3-19.35-16.2-37.8-28.8-55.35 82.8 4.05 149.4 73.35 149.4 155.7 0 38.7-14.4 75.6-40.95 104.4l-7.65 8.55 9.9 4.95c85.05 43.65 137.7 130.5 137.7 225.9v50.85c0 13.5-10.8 24.3-24.3 24.3l-49.95 0.9z"
                p-id="17561"
                fill="#909399"
              ></path>
            </svg>
            <!-- 文本 -->
            <span slot="title">用户列表</span>
          </el-menu-item>
          <!-- 广告位管理 -->
          <el-menu-item index="advertising">
            <!-- 图标 -->
            <svg
              t="1629188845977"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2809"
              width="20"
              height="20"
            >
              <path
                d="M914.060942 182.173615c0-25.679054-20.813-46.474657-46.459307-46.474657L222.83152 135.698958c-25.661657 0-46.45726 20.794579-46.45726 46.474657l0 448.022898c0 25.678031 20.796626 46.492054 46.45726 46.492054l644.770115 0c25.64733 0 46.459307-20.814023 46.459307-46.492054L914.060942 182.173615zM848.486382 588.989065c0 21.261229-17.22614 38.519093-38.486346 38.519093L280.401395 627.508158c-21.244856 0-38.485322-17.25684-38.485322-38.519093l0-365.624377c0-21.259183 17.22614-38.502719 38.485322-38.502719l529.598641 0c21.245879 0 38.486346 17.242513 38.486346 38.502719L848.486382 588.989065z"
                p-id="2810"
                fill="#909399"
              ></path>
              <path
                d="M373.078497 86.518549l98.359793 0 0 147.548389-98.359793 0 0-147.548389Z"
                p-id="2811"
                fill="#909399"
              ></path>
              <path
                d="M618.980538 86.518549l98.356723 0 0 147.548389-98.356723 0 0-147.548389Z"
                p-id="2812"
                fill="#909399"
              ></path>
              <path
                d="M176.357887 725.867951l737.703055 0 0 49.179385-737.703055 0 0-49.179385Z"
                p-id="2813"
                fill="#909399"
              ></path>
              <path
                d="M323.898088 676.688566l98.359793 0 0 196.718563-98.359793 0 0-196.718563Z"
                p-id="2814"
                fill="#909399"
              ></path>
              <path
                d="M668.157877 676.688566l98.360817 0 0 196.718563-98.360817 0 0-196.718563Z"
                p-id="2815"
                fill="#909399"
              ></path>
              <path
                d="M373.524679 115.639147l96.195397 0 0 89.03191-96.195397 0 0-89.03191Z"
                p-id="2816"
                fill="#909399"
              ></path>
              <path
                d="M620.153303 115.639147l95.172042 0 0 89.03191-95.172042 0 0-89.03191Z"
                p-id="2817"
                fill="#909399"
              ></path>
            </svg>
            <!-- 文本 -->
            <span slot="title">广告推荐</span>
          </el-menu-item>

          <!-- 产品管理 -->
          <el-submenu index="3">
            <!-- 产品管理一级菜单 -->
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628669537350"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="23220"
                width="20"
                height="20"
              >
                <path
                  d="M309.03312857 694.24542529c4.53498322-4.00766006 8.17351667-8.17351667 12.33937326-12.23390863l1.05464712-1.31830912c-16.87435647 16.34703333-17.66534243 17.66534243-13.23582302 13.49948503z"
                  fill="#909399"
                  p-id="23221"
                ></path>
                <path
                  d="M412.01943671 513.26794944l-240.40684973-113.90190684-0.73825324-0.36912662a79.09854675 79.09854675 0 0 0-32.00854531-7.22433417 51.94137937 51.94137937 0 0 0-34.80336091 12.39210518 41.23670911 41.23670911 0 0 0-13.86861163 31.16482827v307.27148786a66.28458225 66.28458225 0 0 0 15.81970935 39.81293535 103.88275791 103.88275791 0 0 0 38.54735816 29.95198299l240.35411782 113.90190764 0.68552051 0.36912662A79.78406726 79.78406726 0 0 0 417.60906704 933.86128989a51.88864663 51.88864663 0 0 0 34.80336091-12.33937327 41.28944183 41.28944183 0 0 0 13.86861163-31.21756018V583.0856005a66.54824423 66.54824423 0 0 0-15.81970935-39.81293536 103.88275791 103.88275791 0 0 0-38.60009088-29.95198299z m508.0236004-109.15599436a51.83591474 51.83591474 0 0 0-34.80336091-12.39210598 79.73133535 79.73133535 0 0 0-32.00854531 7.22433416L612.03329519 513.26794944a103.88275791 103.88275791 0 0 0-38.54735815 29.95198296 66.39004688 66.39004688 0 0 0-15.81970935 39.81293537v307.21875596a41.28944183 41.28944183 0 0 0 13.86861164 31.21756017 51.88864663 51.88864663 0 0 0 34.80336089 12.33937325 79.94226462 79.94226462 0 0 0 32.06127805-7.27706606l240.09045584-114.21830154a103.98822336 103.98822336 0 0 0 38.60009088-29.9519838 66.60097614 66.60097614 0 0 0 15.81970935-39.86566727l0.89644977-307.21875596a41.39490647 41.39490647 0 0 0-13.81587973-31.16482744z m-85.42643033-100.19149256a48.83016989 48.83016989 0 0 0 33.2213898-42.66048285 48.25011319 48.25011319 0 0 0-33.11592517-41.76403308L567.42171545 100.0571405A131.83091125 131.83091125 0 0 0 515.11120947 90.14345621a135.78583859 135.78583859 0 0 0-55.2635181 10.81013489L189.69978793 225.71836555a48.8829018 48.8829018 0 0 0-33.1686579 42.66048284 48.14464856 48.14464856 0 0 0 33.06319327 41.71130035L456.89467927 429.73988409a120.59891784 120.59891784 0 0 0 36.06893728 9.06996644l-1.00191523 0.84371786h17.2434831a135.73310669 135.73310669 0 0 0 55.2635181-10.91559869z"
                  fill="#909399"
                  p-id="23222"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>产品管理</span>
            </template>
            <!-- 二级菜单 -->
            <!-- 类型管理 -->
            <el-menu-item index="category">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628669672024"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="24128"
                  width="20"
                  height="20"
                >
                  <path
                    d="M354.3 448.2h-199c-50.3 0-91.2-41.2-91.2-91.9V155.6c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM155.4 113.8c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V155.6c0-23-18.6-41.8-41.4-41.8h-199zM868.6 448.2h-199c-50.3 0-91.2-41.2-91.2-91.9V155.6c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM669.7 113.8c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V155.6c0-23-18.6-41.8-41.4-41.8h-199zM354.3 958.8h-199c-50.3 0-91.2-41.2-91.2-91.9V666.2c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM155.4 624.4c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V666.2c0-23-18.6-41.8-41.4-41.8h-199zM868.6 958.8h-199c-50.3 0-91.2-41.2-91.2-91.9V666.2c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM669.7 624.4c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V666.2c0-23-18.6-41.8-41.4-41.8h-199z"
                    p-id="24129"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>品类管理</span>
              </template>
            </el-menu-item>
            <!-- 店铺列表 -->
            <el-menu-item index="shop">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1629188385521"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1802"
                  width="20"
                  height="20"
                >
                  <path
                    d="M498.1 812.9H299.7c-16 0-31.4-5.7-43.3-15.9-12.5-10.7-20.1-25.5-21.4-41.7l-0.1-1-0.1-3.9V515.7c0-13.8 11.2-25 25-25s25 11.2 25 25v234.2l0.1 1.7c0.7 6.3 7.1 11.2 14.8 11.2h198.4c13.8 0 25 11.2 25 25s-11.2 25.1-25 25.1zM634.9 352.1H361.3c-13.8 0-25-11.2-25-25s11.2-25 25-25h273.5c13.8 0 25 11.2 25 25s-11.1 25-24.9 25z"
                    fill="#909399"
                    p-id="1803"
                  ></path>
                  <path
                    d="M708 532.1c-24 0-47.4-6.7-67.8-19.5-13.9-8.7-25.9-19.9-35.4-33.1-23.8 32.8-62 52.5-103.2 52.5h-0.5c-41.1 0-79.6-19.9-103.6-52.6-24.2 33.1-62.4 52.6-103.7 52.6-33.4 0-65.1-12.8-89.1-36-24.1-23.2-37.9-54.3-38.9-87.6l-0.2-7L210 247.2c10.7-44.2 38.1-69.6 75.2-69.6H715c19.6 0 36 6.3 48.8 18.8 11.7 11.4 20.1 27.4 26.3 50.3l46.6 154.9-0.3 7.2c-1.1 33.2-14.9 64.3-39 87.4-24 23.1-55.7 35.9-89.1 35.9h-0.3zM604.9 413.8c9.1 0 22 3.7 31.6 21.1l0.3 0.5 1.5 3c12.9 26.6 40.3 43.8 69.8 43.8h0.5c42.1 0 76.2-32.5 78-74.1l-44.4-147.6-0.1-0.3c-8.9-32.5-18.5-32.5-27-32.5H285.3c-4.7 0-19.2 0-26.8 31.8l-0.3 1.1L215.7 408c1.8 41 36.6 74.2 78 74.2 26.6 0 51.1-13.3 65.7-35.6l2.1-3.4c9.5-16.1 21.7-24.3 36.2-24.3 9.2 0 22.5 3.5 33.1 20.2l0.3 0.5 1.8 2.9c13.9 24.4 40 39.6 68.1 39.6h0.5c28.5 0 54.6-15.5 68.2-40.5l1.8-3.6c8.1-16.1 19.2-24.2 33.4-24.2zM844.2 620.4H571.9c-13.8 0-25-11.2-25-25s11.2-25 25-25h272.3c13.8 0 25 11.2 25 25s-11.2 25-25 25zM799.2 745.1H571.9c-13.8 0-25-11.2-25-25s11.2-25 25-25h227.3c13.8 0 25 11.2 25 25s-11.2 25-25 25zM749.2 862.4H569.9c-13.8 0-25-11.2-25-25s11.2-25 25-25h179.3c13.8 0 25 11.2 25 25s-11.2 25-25 25z"
                    fill="#909399"
                    p-id="1804"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>店铺列表</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 个人信息对话框区域 -->
    <el-dialog
      title="个人信息"
      :visible.sync="InfoVisible"
      width="70%"
      @close="editDialogclosed"
    >
      <!-- 内容主体区域 -->
      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="8">
            <div>
              <el-upload
                class="avatar-uploader"
                :action="this.headUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="12">
            <!-- 用户名 -->
            <el-form-item label="账号" prop="username">
              <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <!-- 昵称 -->
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="editForm.nickName"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
              <el-input v-model="editForm.password"></el-input>
            </el-form-item>
            <!-- 年龄 -->
            <el-form-item label="年龄" prop="age">
              <el-input v-model="editForm.age"></el-input>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="editForm.sex" label="1" @change="changeRadio()"
                >男</el-radio
              >
              <el-radio v-model="editForm.sex" label="0" @change="changeRadio()"
                >女</el-radio
              >
            </el-form-item>
            <!-- 手机 -->
            <el-form-item label="手机" prop="phone">
              <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item label="邮箱" prop="mailbox">
              <el-input v-model="editForm.mailbox"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 底部按钮区域 -->
        <el-button @click="InfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import '../assets/css/global.css'
export default {
  mounted () {
    this.Id = parseInt(window.sessionStorage.getItem('id'))
    this.nickName = window.sessionStorage.getItem('nickName')
    this.getHead()
    this.headUrl = `http://localhost:5000/HeadPortrait/uploadfiles/${this.Id}`
    this.getNowUse()
  },
  data () {
    return {
      headUrl: '',
      // 用户信息
      userlist: [
      ],
      // radio初始数据
      radio: 0,
      // 获取到的用户信息
      editForm: {
      },
      // 是否折叠
      isCollapse: false,
      nickName: '',
      Id: 0,
      // 控制个人信息对话框的隐藏和显示，默认为false
      InfoVisible: false,
      ChangeFormRules: {
        adminname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        adminpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      imageUrl: ''
    }
  },
  created () {

  },
  methods: {
    // 修改当前用户信息
    async editInfo () {
      console.log(this.editForm)
      this.editForm.age = parseInt(this.editForm.age)
      this.editForm.sex = parseInt(this.editForm.sex)
      const { data: res } = await this.$http.put(`users/putself/${this.Id}`, this.editForm)
      this.InfoVisible = false
      this.nickName = this.editForm.nickName
      window.sessionStorage.setItem('nickName', this.nickName)
      this.editForm = res.data
    },
    // 获取当前用户信息
    async getNowUse () {
      const { data: res } = await this.$http.get(`Users/${this.Id}`)
      console.log(res)
      this.editForm = res.data
      this.editForm.sex = res.data.sex + ''
    },
    // 获取radio选中值
    changeRadio () {
      console.log(this.editForm.sex)
    },
    // 点击下拉菜单触发的事件
    // 注销
    handleCommand (command) {
      if (command === 'logout') {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    },
    // 点击折叠，切换菜单的折叠和展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 个人信息
    PersonalInfo (row) {
      this.InfoVisible = true
      console.log(row)
    },
    // 根据用户id获取头像
    async getHead () {
      await this.$http({
        url: `http://localhost:5000/HeadPortrait/H/${this.Id}`,
        method: 'get',
        responseType: 'blob'
      }).then(({ data }) => {
        console.log(data)
        const blob = new Blob([data])
        const url = URL.createObjectURL(blob)
        this.imageUrl = url
      }
      )
    },
    // 修改个人信息
    async PutPassWord () {
      this.InfoVisible = false
      await this.$http.put(`admin/${this.Id}`, this.ChangeForm)
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 监听修改密码对话框关闭事件
    editDialogclosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 头像上传成功
    handleAvatarSuccess (res, file) {
      console.log(res)
      console.log(file.raw)
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 获取头像
    beforeAvatarUpload (file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-dropdown-link {
  /* color: red; */
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
}
.title {
  display: flex;
  align-items: center;
  color: rgb(31, 29, 29);
}
span {
  margin-left: 15px;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: none;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.avatar-uploader-icon[data-v-fae5bece] {
  background-color: #c0c4cc;
  color: #fff;
  border-radius: 90px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar[data-v-fae5bece] {
  border-radius: 150px;
}
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
/* .towcard{
  float: right;
} */
</style>
